<template>
    <div class="header-info-box">
      <div class="ratings-wrap-show clearfix">
        <div class="ratings-wrap-content">
          <div class="ratings-info-title-wrapper">
            <div class="info-title-item">{{seller.name}}</div>
            <div class="star-wrapper">
              <star :score="seller.score" :size="48" v-if="seller.score"></star>
            </div>
          </div>
          <div class="info-discount-wrapper">
            <div class="info-discount-title"><i class="line-icon"></i><span class="info-discount-text">优惠信息</span><i class="line-icon"></i></div>
            <ul class="info-discount-list">
              <li class="info-discount-item" v-for="(item,index) in seller.supports" :key="item.id">
                <span class="info-discount-item-icon" :class="classMap[seller.supports[index].type]"></span>
                <span class="info-discount-item-text">{{seller.supports[index].description}}</span></li>
            </ul>
          </div>
          <div class="info-discount-wrapper">
            <div class="info-discount-title"><i class="line-icon"></i><span class="info-discount-text">商家公告</span><i class="line-icon"></i></div>
            <div class="shop-info-text">{{seller.bulletin}}</div>
          </div>
        </div>
      </div>
      <div class="close-icon" @click="toggleClose(false)">
        <i class="icon-close"></i>
      </div>
    </div>
</template>

<script>
  import star from '../../components/star/star'
  export default {
    props: ['seller'],
    data () {
      return {
          classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      }
    },
    created () {
      // console.log(this.seller.supports)
    },
    components: {
      star
    },
    methods: {
      toggleClose (flag) {
        this.$emit('closeToggleModel', flag)
      }
    }
  }
</script>
<!--css Sticky footer布局-->
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin";
  .header-info-box
    position: fixed
    z-index: 100
    top: 0
    left: 0
    width: 100%
    height: 100%
    overflow: auto
    transition: all 0.5s
    backdrop-filter: blur(10px)
    color #ffff
    background-color: rgba(7, 17, 27, 0.8)
  &.fade-transition
    opacity:1
    background-color: rgba(7, 17, 27, 0.8)
  &.fade-enter, &.fade-leave
    opacity: 0
    background: rgba(7, 17, 27, 0)
  .ratings-wrap-show
    width: 100%
    min-height:100%
    padding: 1px
  .ratings-wrap-content
    margin-top: 64px
    padding-bottom :64px
  .info-discount-wrapper
    padding: 0 0 16px
    width: 80%
    box-sizing: border-box
    margin:0 auto
  .info-title-item
    color: #ffffff
    font-size: 16px
    font-weight: bold
    text-align: center
  .close-icon
    position: relative
    width: 32px
    height: 32px
    margin: -64px auto 0 auto
    clear: both
    font-size: 32px
  .info-discount-title
    display:flex
    align-items:center
    justify-content: center
    padding-bottom: 24px
  .line-icon
    flex:1
    height:1px
    width:112px
    background:rgba(255,255,255,.2)
  .info-discount-item
    padding-bottom: 12px
    padding-left: 12px
  .info-discount-item-icon
    display: inline-block
    vertical-align: top
    width: 16px
    height: 16px
    margin-right: 6px
    background-repeat: no-repeat
    &.decrease
      background:url("../../../resource/img/decrease_1@2x.png")
      background-size: 100% 100%
    &.discount
      background:url("../../../resource/img/discount_1@2x.png")
      background-size: 100% 100%
    &.guarantee
      background:url("../../../resource/img/guarantee_1@2x.png")
      background-size: 100% 100%
    &.invoice
      background:url("../../../resource/img/invoice_1@2x.png")
      background-size: 100% 100%
    &.special
      background:url("../../../resource/img/special_1@2x.png")
      background-size: 100% 100%
  .info-discount-item-text
     font-size:12px
  .info-discount-text
    margin:0 10px
  .shop-info-text
    line-height: 24px
    font-size: 14px
    padding: 0 12px
  .star-wrapper
    margin-top: 16px
    padding: 2px 0 28px
    text-align: center
  .icon-close
    color:rgba(255,255,255,.5)
</style>
